<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 全局组件在组件的任意位置都可以调用
			 局部组件只在指定的对象中进行调用-->
			 <div id="app">
			 	<aaa></aaa>
				<bbb></bbb>
			 </div>
			 <template id ="aaaTem">
				 <div>
				 	<h1>{{msg}}</h1>
					<bbb></bbb>
					<!-- 全局无法引用局部 -->
				 </div>
			 </template>
			 <template id="bbbTem">
				 <div>
				 	<h1>{{msg}}</h1>
					<p>引用</p>
					//局部可以引用全局
					<aaa></aaa>
				 </div>
			 </template>
			 
			 
			 <script src="../js/vue.js"> 	
			 </script>
			 <script>	
			 Vue.component("aaa",{
			 				 data(){
			 					 return{
			 						 msg:"全局组件"
			 					 }
			 				 },
			 				 template:"#aaaTem"
			 })
			 // 定义局部组件
			 let bbb = {
				 data(){
					 return{
						 msg:"局部组件"
					 }
				 },
				 template:"#bbbTem"
				 
			 }
				 const app = new Vue({
					 el:"#app",
					 components:{
						 //局部组件名称  组件内容
						 bbb
						 } 
				 })
			 </script>
	</body>
</html>
